<template>
    <div>
        <div class="footer" >
            <div class="footer_a">
                <span  v-for="(v, index) in footarr" :key="index">{{ v }}</span>
            </div>
            <div class="footer_b">
                2018 浙B2-20080224
                <span >服务中心</span>
            </div>
        </div>
        <div class="foot_gd">
            <div class="foot_gd1" @click="toTop">               
                      <img :src="logoImg" alt="">
            </div>
            <div class="foot_gd2" @click="toCart">
                <img src="https://img.alicdn.com/imgextra/i3/O1CN0151qDFg2AN4Vma3SdE_!!6000000008190-2-tps-63-63.png"
                    alt="">
                <p>购物车</p>
            </div>
            <div class="foot_gd2" @click="toOnec">
                <img src="https://img.alicdn.com/imgextra/i3/O1CN01nOAkIZ1ou7XqRzXEZ_!!6000000005284-2-tps-63-63.png"
                    alt="">
                <p>我的淘宝</p>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            footarr: ["登录", "注册", "手淘APP", "用户反馈"],
            logoImg:"https://img.alicdn.com/imgextra/i1/O1CN01oAxBQ81qF1EZtn4Rq_!!6000000005465-2-tps-108-108.png"
        }
    },
    methods:{
        toTop(){
            window.scrollTo({top:0,behavior:"smooth"})
        },
        toCart(){
            this.$router.push("/CartPage")
        },
        toOnec() {
            
        }
    },
    mounted(){
        window.onscroll = () => {
            if (document.documentElement.scrollTop > 300) {
                this.logoImg = "https://img.alicdn.com/imgextra/i3/O1CN01r7d0bs1XQwqepToWX_!!6000000002919-2-tps-108-108.png"
            } else {
                this.logoImg = "https://img.alicdn.com/imgextra/i1/O1CN01oAxBQ81qF1EZtn4Rq_!!6000000005465-2-tps-108-108.png"
            }
        }
    }
}
</script>

<style scoped>
.footer {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: auto;
    margin-top: .4rem;
    padding: .4rem 0 1.14rem;
    background: #4e525e;

}

.footer .footer_a {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;

}

.footer .footer_a span {
    height: .7rem;
    line-height: .7rem;
    font-size: .28rem;
    padding: 0 .34rem;
    border-radius: .12rem;
    background: #555965;
    border: .02rem solid #444850;
    color: #aeb0b7;
}

.footer .footer_b {
    width: 100%;
    font-size: .24rem;
    color: #c3c6ca;
    box-sizing: border-box;
    margin-top: .4rem;
    height: .4rem;
    line-height: .4rem;
    padding-left: 2.5rem;
    background: url() no-repeat 2rem center;
    background-size: .36rem;
}

.footer .footer_b span {
    color: #c3c6ca;
}

/* 底部固定栏 */
.foot_gd {
    width: 100%;
    height: 1rem;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
}

.foot_gd div {
    width: 25%;
    height: .74rem;
    margin: .08rem 0;
}
.foot_gd .foot_gd1{
    display: flex;
    justify-content: center;
    align-items: center;
}
.foot_gd .foot_gd1 img{
    height: .72rem;
    border-radius: .45rem;
     background: #fd7131 ;
    /* background-size: .74rem .74rem; */
}

.foot_gd .foot_gd2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.foot_gd .foot_gd2 img {
    width: .4rem;
    height: .4rem;

}

.foot_gd .foot_gd2 p {
    font-size: .24rem;
    color: #666;
    margin-top: .1rem;
}
</style>